<template>
  <g class="planet">
    <!-- 行星主体 -->
    <circle
      :cx="position.x"
      :cy="position.y"
      :r="planetData.radius"
      :fill="planetData.color"
      class="planet-body"
      @mouseenter="showTooltip = true"
      @mouseleave="showTooltip = false"
      @click="$emit('planet-click', planetData)"
    />
    
    <!-- 行星表面效果 -->
    <circle
      :cx="position.x"
      :cy="position.y"
      :r="planetData.radius - 1"
      fill="none"
      :stroke="lightenColor(planetData.color)"
      stroke-width="0.5"
      opacity="0.7"
    />
    
    <!-- 悬停提示 -->
    <g v-if="showTooltip" class="tooltip">
      <rect
        :x="position.x + planetData.radius + 10"
        :y="position.y - 15"
        :width="tooltipWidth"
        height="30"
        fill="rgba(0, 0, 0, 0.8)"
        rx="4"
      />
      <text
        :x="position.x + planetData.radius + 10 + tooltipWidth / 2"
        :y="position.y"
        text-anchor="middle"
        fill="white"
        font-size="12"
        dy="0.3em"
      >
        {{ planetData.nameCn }}
      </text>
    </g>
  </g>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import type { PlanetData, Position } from '../types';
import { calculatePlanetPosition, lightenColor } from '../utils/animation';

// Props
interface Props {
  planetData: PlanetData;
  currentTime: number;
  animationSpeed: number;
  centerX: number;
  centerY: number;
}

const props = defineProps<Props>();

// Emits
defineEmits<{
  'planet-click': [planet: PlanetData];
}>();

// 响应式数据
const showTooltip = ref(false);

// 计算当前位置
const position = computed((): Position => {
  return calculatePlanetPosition(
    props.planetData,
    props.currentTime,
    props.animationSpeed,
    props.centerX,
    props.centerY
  );
});

// 提示框宽度
const tooltipWidth = computed(() => {
  return props.planetData.nameCn.length * 12 + 20;
});


</script>

<style scoped>
.planet-body {
  cursor: pointer;
  transition: all 0.3s ease;
}

.planet-body:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
}

.tooltip {
  pointer-events: none;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>